<!-- 记录视频播放的时间位置，下次进入接着上次播放的位置继续播放 时间记录参数 -->
<template>
	<view class="video_div">
		<video id="myVideo" style="
			width: 100%;
			height: 100%;
		" :initial-time="initialTime" :src="src"
               @timeupdate="videoTimeUpdate" controls></video>
	</view>
</template>

<script>
	import {
		studyHistory
	} from '@/apis/apis.js'
	export default {
		props: {
			src: {
				type: String,
				default () {
					return '';
				}
			},
			title: {
				type: String,
				default () {
					return '';
				}
			},
			initialTime: {
				type: Number,
				default () {
					return 0;
					// 指定视频初始位置 s
				}
			},
			poster:{
				type: String,
				default () {
					return '';
				}
			},
			courceId: Number
		},
		data() {
			return {
				// innerVideoContext: null,
				showHide: true,
				status: null, // 播放状态
				progress: 0, //进度条
				currentLength: 0, // 当前播放s
				totalLength: 0, // 总时长 s
				videoDuration: '00:00',
				videoCurrent: '00:00',
				clickTimer: null,
				videoContext: {},
				currentTime: null, //当前播放时间
				duration: null, //视频总时间
			};
		},
		onReady() {

		},
		onHide() {},
		onLaunch() {

		},
		beforeDestroy() {
			//新增学习历史记录
			if (this.currentTime !== this.duration && this.currentTime !== 0) {
				this.addStudyHistory()
			}
			// 每次记录视频播放的时间位置，下次进入接着上次播放的位置继续播放
			this.localVideoRecordTime()
		},
		created() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			// 计算百分比
			calcPercentage(num, total) {
				if (num == 0 || total == 0) {
					return 0;
				}
				return Math.round((num / total) * 10000) / 100.0; // 小数点后两位百分比
			},
			// 转换时分秒
			getHMS(seconds) {
				let obj = {};
				obj.H = Number.parseInt(seconds / 3600);
				obj.i = Number.parseInt((seconds - obj.H * 3600) / 60);
				obj.s = Number.parseInt(seconds - obj.H * 3600 - obj.i * 60);
				if (obj.H < 10) {
					obj.H = '0' + obj.H;
				}
				if (obj.i < 10) {
					obj.i = '0' + obj.i;
				}
				if (obj.s < 10) {
					obj.s = '0' + obj.s;
				}
				let rs = (obj.H !== '00' ? obj.H + ':' : '') + obj.i + ':' + obj.s;
				return rs;
			},
			notClick() {
				return;
			},
			videoTimeUpdate(e) {
				this.currentTime = e.detail.currentTime
				this.duration = e.detail.duration
				if (e.detail.currentTime == e.detail.duration) {
					//播放完增加一个历史记录
					this.addStudyHistory()
				}
				this.localVideoRecordTime()
			},
			//添加学习历史
			addStudyHistory() {
				let study = {
					courceId: this.courceId,
					duration: Math.floor(this.currentTime),
					progress: ((this.currentTime / this.duration) * 100).toFixed(2)
				}
				studyHistory(study).then(res => {
					// console.log(res);
				})
			},
			//记录视频播放的时间位置，下次进入接着上次播放的位置继续播放
			localVideoRecordTime() {
				let videoTime = {
					courceId: this.courceId,
					vidoeSrc: this.src,
					duration: Math.floor(this.currentTime)
				}
				let localSaveVideoList = []
				if (uni.getStorageSync('localSaveVideoList')) {
					localSaveVideoList = JSON.parse(uni.getStorageSync('localSaveVideoList'))
				}
				let flag = false
				localSaveVideoList.forEach((v, idx) => {
					// 如果已有历史数据，直接覆盖
					if (v.courceId == videoTime.courceId && v.vidoeSrc == videoTime.vidoeSrc) {
						localSaveVideoList[idx] = videoTime
						flag = true
					}
				})
				if (!flag) {
					localSaveVideoList.unshift(videoTime)
				}
				uni.setStorageSync('localSaveVideoList', JSON.stringify(localSaveVideoList))
				// console.log('本次视频记录：',videoTime,localSaveVideoList,'909',uni.getStorageSync('localSaveVideoList'))
			},
		}
	};
	/**
	 * play	无	播放
	 * pause	无	暂停
	 * seek	position	跳转到指定位置，单位 s
	 * stop		停止视频	微信小程序
	 * sendDanmu	danmu	发送弹幕，danmu 包含两个属性 text, color
	 * playbackRate	rate	设置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5。微信基础库2.6.3 起支持 2.0 倍速
	 * requestFullScreen	无	进入全屏，可传入{direction}参数，详见 video 组件文档	H5和字节跳动小程序不支持{direction}参数
	 * exitFullScreen	无	退出全屏
	 * showStatusBar	无	显示状态栏，仅在iOS全屏下有效	微信小程序、百度小程序、QQ小程序
	 * hideStatusBar	无	隐藏状态栏，仅在iOS全屏下有效	微信小程序、百度小程序、QQ小程序
	 */
</script>
<style>
	.video_div {
		width: 100%;
		height: 100%;
	}

	#myVideo {
		width: 100% !important;
		height: 100% !important;
	}
</style>
